<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <script src="../jquery.min.js"></script>
    <script src="../vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<!--属性：-->
<div id="box">
    <img v-bind:src="url" alt="">
    <img :src="url" alt="" :width="w">
    <!--class和style属性-->
    <!--<strong :class="[red,r]">文字。。。。</strong>-->
    <!--<strong :class="{red:a,blue:b}">文字。。。。</strong>-->
    <!--<strong :class="json">文字。。。。</strong>-->
    <p :style="{color:red}">文字样式。。。。</p>
</div>
<!--模版-->
<div id="box1">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    <!--{{{msg}}}-->
</div>

<!--过滤器-->
<div id="box2">
    {{message|uppercase}}
</div>
<script>
    window.onload = function(){
        new Vue({
            el:"#box",
            data:{
                url:"https://www.baidu.com/img/bd_logo1.png",
                w:'200px',
                red:'red',
                r:'blue',
                a:true,
                b:false,
                json:{
                    red:true,
                    blue:false
                }
            }
        });

        new Vue({
            el:"#box1",
            data:{
                msg:'abc'
            }
        });

        new Vue({
            el:"#box2",
            data:{
                message:'test'
            }
        });
        //过滤器
    /*    Vue.filter('uppercase', function(value,uppercase) {
           /!* if (!value) { return ''}
            value = value.toString()*!/
            return uppercase.charAt(0).toUpperCase() + value.slice(1)
        })*/
    }
</script>
</body>
</html>